import { Modal } from "@arco-design/web-react";
import React, { useEffect } from "react";
import "./index.scss";
import { CustomModalPropsInt } from "./index.model";

export default function CustomModal(props: CustomModalPropsInt) {
  const [visible, setVisible] = React.useState(false);

  const onOK = () => {
    props.onOK?.();
  };

  const onCancel = () => {
    setVisible(false);
    props.onCancel?.();
  };

  useEffect(() => {
    setVisible(props.visible);
  }, [props.visible]);

  useEffect(() => {
    props.onVisibleChange?.(visible);
  }, [visible]);

  return (
    <Modal
      title={props.title}
      visible={visible}
      onOk={onOK}
      onCancel={onCancel}
      autoFocus={false}
      focusLock={true}
      style={{
        width: props.width || "600px",
      }}
    >
      {props.children}
    </Modal>
  );
}
